<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 左侧介绍 -->
      <div class="login-left">
        <h1>📍 会议室预定系统</h1>
        <p>简单、高效的会议室管理解决方案</p>
        <ul class="features">
          <li>✅ 实时预定会议室</li>
          <li>✅ 智能时间冲突检测</li>
          <li>✅ 灵活的时间表配置</li>
          <li>✅ 完善的管理功能</li>
        </ul>
      </div>

      <!-- 右侧登录选项 -->
      <div class="login-right">
        <div class="login-title">
          <h2>欢迎使用</h2>
          <p>请选择您的身份</p>
        </div>

        <div class="login-options">
          <!-- 用户入口 -->
          <div class="login-option" @click="handleUserLogin">
            <div class="icon">👥</div>
            <h3>我要预定会议室</h3>
            <p>查看可用会议室并创建预定</p>
          </div>

          <!-- 管理员入口 -->
          <div class="login-option" @click="showAdminModal = true">
            <div class="icon">🔐</div>
            <h3>我是管理员</h3>
            <p>管理会议室、时间表和系统设置</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 管理员密码验证弹窗 -->
    <a-modal
      v-model:open="showAdminModal"
      title="管理员验证"
      :footer="null"
      @cancel="resetAdminForm"
    >
      <div class="modal-header">
        <h3>请输入管理员密码</h3>
      </div>

      <a-form
        :model="adminForm"
        @finish="handleAdminLogin"
        layout="vertical"
      >
        <a-form-item
          label="管理员密码"
          name="password"
          :rules="[{ required: true, message: '请输入管理员密码' }]"
        >
          <a-input-password
            v-model:value="adminForm.password"
            placeholder="请输入密码"
            size="large"
            @pressEnter="handleAdminLogin"
          />
        </a-form-item>

        <a-alert
          v-if="adminError"
          :message="adminError"
          type="error"
          show-icon
          closable
          @close="adminError = ''"
          class="mb-3"
        />

        <a-form-item>
          <a-space class="w-full">
            <a-button
              type="primary"
              html-type="submit"
              :loading="adminLoading"
              block
              size="large"
            >
              验证并登录
            </a-button>
            <a-button @click="resetAdminForm" block size="large">
              取消
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useAuthStore } from '@/store/auth'
import api from '@/services/api'

const router = useRouter()
const authStore = useAuthStore()
const showAdminModal = ref(false)
const adminLoading = ref(false)
const adminError = ref('')

// 管理员表单
const adminForm = reactive({
  password: ''
})

// 用户登录（直接进入）
const handleUserLogin = () => {
  // 用户直接进入预定界面，无需登录
  router.push('/booking')
}

// 管理员密码验证
const handleAdminLogin = async () => {
  adminLoading.value = true
  adminError.value = ''
  
  try {
    // 验证管理员密码
    const response = await api.post('/system/admin-password/verify', {
      password: adminForm.password
    })
    
    if (response.data.valid) {
      message.success('验证成功，正在登录...')
      
      try {
        // ✅ 使用 authStore.login() 统一处理登录
        await authStore.login('admin', 'admin')
        
        message.success('登录成功！')
        showAdminModal.value = false
        
        // 等待 store 状态更新
        await new Promise(resolve => setTimeout(resolve, 100))
        router.push('/admin')
      } catch (loginError) {
        console.error('Login error:', loginError)
        adminError.value = '管理员账号登录失败，请联系系统管理员'
      }
    } else {
      adminError.value = '密码错误，请重试'
    }
  } catch (error) {
    console.error('Verification error:', error)
    adminError.value = '验证失败，请检查网络连接'
  } finally {
    adminLoading.value = false
  }
}

// 重置管理员表单
const resetAdminForm = () => {
  adminForm.password = ''
  adminError.value = ''
  showAdminModal.value = false
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-box {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.login-left {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 40px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-left h1 {
  font-size: 32px;
  margin-bottom: 20px;
}

.login-left p {
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 30px;
}

.features {
  list-style: none;
  padding: 0;
}

.features li {
  padding: 8px 0;
  font-size: 16px;
}

.login-right {
  padding: 60px 40px;
}

.login-title {
  text-align: center;
  margin-bottom: 40px;
}

.login-title h2 {
  color: #262626;
  font-size: 28px;
  margin-bottom: 10px;
}

.login-title p {
  color: #8c8c8c;
  font-size: 14px;
}

.login-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-option {
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 30px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.login-option:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.login-option .icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.login-option h3 {
  color: #262626;
  font-size: 20px;
  margin-bottom: 8px;
}

.login-option p {
  color: #8c8c8c;
  font-size: 14px;
  margin: 0;
}

.modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.modal-header h3 {
  color: #262626;
  font-size: 20px;
  margin-bottom: 8px;
}

.modal-header p {
  color: #8c8c8c;
  font-size: 14px;
  margin: 0;
}

.mb-3 {
  margin-bottom: 16px;
}

.w-full {
  width: 100%;
  display: flex;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-box {
    grid-template-columns: 1fr;
  }
  
  .login-left {
    display: none;
  }
}
</style>
